<template>
	<view class="password-container">
		<view class="form-box">
			<!-- 原密码 -->
			<view class="input-group">
				<text class="label">原密码</text>
				<view class="input-box">
					<input 
						:type="showOldPwd ? 'text' : 'password'"
						v-model="passwordForm.oldPassword"
						placeholder="请输入原密码"
						placeholder-class="placeholder"
					/>
					<view class="eye-icon" @click="showOldPwd = !showOldPwd">
						<uni-icons :type="showOldPwd ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 新密码 -->
			<view class="input-group">
				<text class="label">新密码</text>
				<view class="input-box">
					<input 
						:type="showNewPwd ? 'text' : 'password'"
						v-model="passwordForm.newPassword"
						placeholder="请输入新密码"
						placeholder-class="placeholder"
					/>
					<view class="eye-icon" @click="showNewPwd = !showNewPwd">
						<uni-icons :type="showNewPwd ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<text class="tips">密码长度为6-20位字符</text>
			</view>
			
			<!-- 确认密码 -->
			<view class="input-group">
				<text class="label">确认密码</text>
				<view class="input-box">
					<input 
						:type="showConfirmPwd ? 'text' : 'password'"
						v-model="passwordForm.confirmPassword"
						placeholder="请再次输入新密码"
						placeholder-class="placeholder"
					/>
					<view class="eye-icon" @click="showConfirmPwd = !showConfirmPwd">
						<uni-icons :type="showConfirmPwd ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="btn-box">
			<button class="submit-btn" @click="handleSubmit">确认修改</button>
		</view>
	</view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import {uppwd} from '@/api/student.js'
export default {
	setup() {
		const state = reactive({
			passwordForm: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			stupwdinfo:{
				sSid: uni.getStorageSync("student").sSid,
				sPassword: '',
				rPassword: '',
			},
			showOldPwd: false,
			showNewPwd: false,
			showConfirmPwd: false
		})
		
		function handleSubmit() {
			// 表单验证
			if (!state.passwordForm.oldPassword) {
				uni.showToast({
					title: '请输入原密码',
					icon: 'none'
				})
				return
			}
			
			if (!state.passwordForm.newPassword) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				})
				return
			}
			
			if (state.passwordForm.newPassword.length < 6 || state.passwordForm.newPassword.length > 20) {
				uni.showToast({
					title: '密码长度应为6-20位',
					icon: 'none'
				})
				return
			}
			
			if (!state.passwordForm.confirmPassword) {
				uni.showToast({
					title: '请确认新密码',
					icon: 'none'
				})
				return
			}
			
			if (state.passwordForm.newPassword !== state.passwordForm.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})
				return
			}
			state.stupwdinfo.sPassword = state.passwordForm.oldPassword;
			state.stupwdinfo.rPassword = state.passwordForm.newPassword;
			uppwd(state.stupwdinfo).then(res=>{
				if(res.code == 1){
					uni.showToast({
						title: '密码修改成功',
						icon: 'success',
						duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					})
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'error',
						duration: 2000,
					})
					state.passwordForm.confirmPassword = '';
					state.passwordForm.newPassword = '';
					state.passwordForm.oldPassword = '';
				}
			})
		}
		
		return {
			...toRefs(state),
			handleSubmit
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.password-container {
	padding: 30rpx;
	
	.form-box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 30rpx;
		
		.input-group {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;
			
			&:last-child {
				border-bottom: none;
			}
			
			.label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.input-box {
				position: relative;
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				padding: 0 20rpx;
				
				input {
					flex: 1;
					height: 88rpx;
					font-size: 28rpx;
					color: #333;
				}
				
				.eye-icon {
					padding: 20rpx;
					margin-right: -20rpx;
				}
			}
			
			.tips {
				display: block;
				font-size: 24rpx;
				color: #999;
				margin-top: 16rpx;
			}
			
			.placeholder {
				color: #999;
			}
		}
	}
	
	.btn-box {
		margin-top: 60rpx;
		padding: 0 30rpx;
		
		.submit-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #119790;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
			
			&:active {
				background-color: darken(#119790, 5%);
			}
		}
	}
}
</style>
